import { View } from "@tarojs/components";
import { Arrow, AddOutlined, DeleteOutlined, ArrowDown } from "@taroify/icons";
import Menu from "./index";
import { useState } from "react";

interface PropsType {
  data: any;
  delMenu: any;
  addMenu: any;
  isLink: boolean;
  handleLink: any;
  handleLink2: any;
}

export default function MenuItem(props: PropsType) {
  const { data, delMenu, addMenu, isLink, handleLink, handleLink2 } = props;
  const [expend, setExpend] = useState<boolean>(data?.expend);

  const expendShow = () => {
    if (data.children && data.children.length) {
      setExpend(!expend);
    }
  };

  const handleLink1 = (data) => {
    handleLink(data);
    if (!data.children || !data.children.length) {
      handleLink2(data);
    }
  };
  return (
    <View>
      <View
        style={{
          display: "flex",
          padding: "10px",
          alignItems: "center",
          gap: "5px",
          fontSize: "14px",
          backgroundColor: "#efefef",
          borderRadius: "5px",
        }}
        onClick={() => (isLink ? "" : expendShow())}
      >
        {data.children &&
          Boolean(data.children.length) &&
          (expend ? (
            isLink ? (
              <ArrowDown onClick={() => expendShow()} />
            ) : (
              <ArrowDown />
            )
          ) : isLink ? (
            <Arrow onClick={() => expendShow()} />
          ) : (
            <Arrow />
          ))}
        <View
          style={{
            flex: "1",
            whiteSpace: "nowrap",
            textOverflow: "ellipsis",
            overflow: "hidden",
          }}
          onClick={() => (isLink ? handleLink1(data) : "")}
        >
          {data.categoryName || data.label}
        </View>
        {data.deep < 3 && (
          <View
            style={{
              marginLeft: "auto",
              display: "flex",
              alignItems: "center",
              gap: "5px",
            }}
          >
            <AddOutlined onClick={() => addMenu(data)} />
            <DeleteOutlined onClick={() => delMenu(data)} />
          </View>
        )}
      </View>
      {data.children && Boolean(data.children.length) && (
        <View
          style={{
            height: expend ? "auto" : "0px",
            overflow: "hidden",
          }}
        >
          <View style={{ marginTop: "10px" }}>
            <Menu
              isLink={isLink}
              data={data.children}
              addMenu={(data) => addMenu(data)}
              delMenu={(data) => delMenu(data)}
              handleLink={(data) => handleLink(data)}
              handleLink2={(data) => handleLink2(data)}
            />
          </View>
        </View>
      )}
    </View>
  );
}
